<template>
	<view>
		<u-navbar placeholder fixed autoBack border title="补卡申请"><view slot="right" class="d-font-32" style="color: #ADB4BD;" @click="recordCard">补卡记录</view></u-navbar>
		<view class="d-p-30">
			<view class="d-m-b-30 card d-p-30">
				<view class="d-flex">
					<view class="d-font-28 u-line-1" style="font-weight: bold;color: #151C24;max-width: 280rpx;">{{ user.xm }}</view>
					<view class="d-font-28 d-m-l-70" style="color: #5D6672;">{{ user.xb }}</view>
					<view class="d-m-l-20 d-m-r-20"><u-line direction="col" length="36rpx" color="#DFDFDF"></u-line></view>
					<view class="tag d-flex">{{ user.smrz }}</view>
					<view class="d-flex-1"></view>
				</view>
				<view class="d-flex d-font-24 d-m-t-20">
					<view class="d-flex" style="flex: 3;">
						<view class="d-m-r-20" style="color: #5D6672;">证件号码</view>
						<view style="color: #162233;">{{ user.zjhm }}</view>
					</view>
					<view class="d-flex" style="flex: 2;">
						<view class="d-m-r-20" style="color: #5D6672;">所属区划</view>
						<view style="color: #162233;">{{ user.districtName }}</view>
					</view>
				</view>
				<view class="d-flex d-font-24 d-m-t-20">
					<view class="d-flex" style="flex: 3;">
						<view class="d-m-r-20" style="color: #5D6672;">项目名称</view>
						<view class="d-flex-1 u-line-1" style="color: #162233;">{{ user.gcmc }}</view>
					</view>
				</view>
				<view class="d-flex d-font-24 d-m-t-20">
					<view class="d-flex" style="flex: 3;">
						<view class="d-m-r-20" style="color: #5D6672;">班组名称</view>
						<view style="color: #162233;">{{ user.bzmc }}</view>
					</view>
					<view class="d-flex" style="flex: 2;">
						<view class="d-m-r-20" style="color: #5D6672;">角色工种</view>
						<view style="color: #162233;">{{ user.zwzc }}</view>
					</view>
				</view>
			</view>
			<view class="card d-flex">
				<text class="d-font-28 d-m-r-30" style="font-weight: bold;color: #151C24;">补卡类型</text>
				<!--  @click="show.showStatus = true" -->
				<view class="input d-flex-1"><u--input placeholder="请选择补卡类型" readonly v-model="form.bklxTxt"></u--input></view>
			</view>
			<view class="card d-flex d-m-t-30">
				<text class="d-font-28 d-m-r-30" style="font-weight: bold;color: #151C24;">补卡时间</text>
				<view class="input d-flex-1" @click="show.showTime = true"><u--input placeholder="请选择补卡时间" readonly v-model="form.bksj"></u--input></view>
			</view>
			<view class="card d-m-t-30">
				<text class="d-font-28 d-m-r-30" style="font-weight: bold;color: #151C24;">补卡原因</text>
				<view class="d-m-t-10"><u--textarea v-model="form.bkyy" placeholder="请输入补卡原因" height="300rpx"></u--textarea></view>
			</view>
		</view>

		<view class="bottom u-safe-area-inset-bottom">
			<view class="u-safe-area-inset-bottom d-flex d-row-center">
				<view style="width: 280rpx;"><u-button text="提交申请" @click="submit" type="primary"></u-button></view>
				<view class="d-m-l-30" style="width: 280rpx;"><u-button text="取消" type="info" @click="back"></u-button></view>
			</view>
		</view>

		<u-datetime-picker :value="$moment(form.bksj).format('HH:mm:ss')" :show="show.showTime" mode="time" @cancel="show.showTime = false" @confirm="setBksj"></u-datetime-picker>
		<u-picker
			:show="show.showStatus"
			title="补卡类型"
			:columns="[status]"
			keyName="label"
			closeOnClickOverlay
			@close="show.showStatus = false"
			@cancel="show.showStatus = false"
			@confirm="setStatus"
		></u-picker>
	</view>
</template>

<script>
import { rykqBk, getStaff } from '../../../common/api.js';
export default {
	data() {
		return {
			show: {
				showStatus: false,
				showTime: false
			},
			status: [{ value: 1, label: '入场' }, { value: 2, label: '出场' }],
			form: {
				xmbh: '', //项目编号
				xmmc: '', //项目名称
				gcbh: '', //工程编号
				gcmc: '', //工程名称
				jsgz: '', //角色工种
				bzbh: '', //班组编号
				bzmc: '', //班组名称
				rybh: '', //人员编号
				xm: '', //人员姓名
				zjhm: '', //证件号码
				lxfs: '', //联系电话
				bksj: '', //补卡时间
				bkyy: '', //补卡原因
				bklx: 1, //补卡类型(1:入场,2:出场)
				sjly: 'APP', //数据来源
				bklxTxt: '入场'
			},
			user: {}
		};
	},
	onLoad(e) {
		if (e && e.bksj) {
			this.form.bksj = e.bksj;
			this.form.bklx = e.bklx;
			this.form.bklxTxt = e.bklx == 1 ? '入场' : '出场';
		} else {
			this.form.bksj = this.$moment().format('YYYY-MM-DD HH:mm:ss');
		}

		let app = this.$user.ssgcxx[this.$appIndex];
		this.form.xmbh = app.gcbh;
		this.form.xmmc = app.gcmc;
		this.form.gcbh = app.gcbh;
		this.form.gcmc = app.gcmc;
		this.form.bzbh = app.bzid;
		this.form.bzmc = app.bzmc;
		this.form.rybh = app.rybh;
		getStaff({
			id: app.rybh
		}).then(e => {
			this.form.jsgz = e.data.gz;
			this.form.xm = e.data.xm;
			this.form.zjhm = e.data.zjhm;
			this.form.lxfs = e.data.lxfs;
			this.user = e.data;
		});
	},
	methods: {
		submit() {
			if (!this.form.bklx) {
				return uni.$u.toast('请选择补卡类型');
			}
			if (!this.form.bksj) {
				return uni.$u.toast('请选择补卡时间');
			}
			if (!this.form.bkyy) {
				return uni.$u.toast('请输入补卡原因');
			}
			this.form.deptId = this.$user.ssgcxx[this.$appIndex].deptId;
			rykqBk({
				...this.form
			}).then(e => {
				uni.$u.toast('提交成功');
				setTimeout(() => {
					uni.$u.route({
						url: '/pages/index/work/recordCard',
						type: 'redirectTo'
					});
				}, 1000);
			});
		},
		recordCard() {
			uni.$u.route({ url: '/pages/index/work/recordCard' });
		},
		setStatus(e) {
			this.form.bklx = e.value[0].value;
			this.form.bklxTxt = e.value[0].label;
			this.show.showStatus = false;
		},
		setBksj(e) {
			this.form.bksj = this.$moment(this.form.bksj).format('YYYY-MM-DD') + ' ' + e.value + ':00';
			this.show.showTime = false;
		},
		back() {
			uni.$u.route({
				type: 'back'
			});
		}
	}
};
</script>

<style lang="scss">
page {
	background-color: #fbfcfc;
	.card {
		box-shadow: 0rpx 5rpx 10rpx rgba(0, 0, 0, 0.05);
		border-radius: 10rpx;
		padding: 20rpx 30rpx;
		background-color: #ffffff;

		.tag {
			height: 32rpx;
			background: #ffb61d;
			border-radius: 4rpx;
			color: #ffffff;
			font-size: 20rpx;
			padding: 0 10rpx;
		}
	}

	.bottom {
		box-sizing: content-box;
		height: 120rpx;
		> view {
			position: fixed;
			background-color: #ffffff;
			left: 0;
			right: 0;
			bottom: 0;
			height: 120rpx;
		}
	}
}
</style>
